import { useState, useEffect } from "react";
import "./index.less";
import MeauBox from "../components/MeauBox";

function ChatListItem({data}: any) {
  const { item, index } = data;
  const { source } = item;

  const cssBySource = source === 'message' ? 'isMessage' : 'isReply';

  const [isShowMessageMeau, setIsShowMessageMeau] = useState(false);

  const handleRightClick = (event: any) => {
    event.preventDefault();
    const flag = !isShowMessageMeau;
    setIsShowMessageMeau(flag);
  };

  return (
    <>
      <div className={`chatList-item ${ cssBySource }`}>
        <img className="message-avatar" src={ item.avatar } alt="" />
        <div className="chatList-item-content text-style" onContextMenu={ handleRightClick }>
          <MeauBox isShowBox={ isShowMessageMeau } data={ data } />
          <div className="white-triangle"></div>
          <div className="chatList-item-content-title one-line-text-overflow">{ item.title }</div>
          <div className="chatList-item-content-list">
            {
              item.chatListData.map((messageItem: any, index: number) => {
                return (
                  <div key={ index } className="chatList-item-content-messages one-line-text-overflow">
                    { messageItem.nickName }：{ messageItem.message }
                  </div>
                )
              })
            }
          </div>
          <div className="chatList-item-content-bottom">
            聊天记录
          </div>
        </div>
      </div>
    </>
  );
}

export default ChatListItem;
